/* eslint-disable no-return-assign */
<template>
  <div class="container">
    <el-card>
      <div v-show="$route.query.id" class="hr"  style="margin-bottom:10px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item></el-breadcrumb>
      </div>
      <!-- 单选,下拉框-->
      <el-form :inline="true" :model="searchForm" ref="searchForm">
        <el-form-item label="标签名称">
          <el-input placeholder="目录名称" v-model="searchForm.directoryName" prop="directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态" class="status">
          <el-select placeholder="请选择" v-model="searchForm.state">
            <el-option label="启用" value=1></el-option>
            <el-option label="禁用" value=0></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="eliminate">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
        <div style="float:right">
          <el-button type="text" @click.native="returnn" v-show="$route.query.id">← 返回学科</el-button>
          <el-button type="success" icon="el-icon-edit"   @click="handleOpen(null)">新增标签</el-button>
        </div>
      </el-form>
      <!-- 数据一共多少条组件 -->
      <our-data v-model="total"></our-data>
      <!-- table表格引入-->
      <el-table :data="tableData" style="width: 100%" v-loading="isLoading">
        <el-table-column  label="序号" width="180" prop="id" type="index"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180"></el-table-column>
        <el-table-column prop="directoryName" label="目录名称" width="180"></el-table-column>
        <el-table-column prop="username" label="创建者" width="200"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="260" :formatter="formatTime"></el-table-column>
        <el-table-column prop="totals" label="面试题数量" width="180"></el-table-column>
        <el-table-column prop="state" label="状态" width="180">
          <template slot-scope="scope">
            {{scope.row.state === 1 ? '已启用' : '已禁用'}}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="操作"> -->
          <template slot-scope="scope">
            <el-button  type="text" v-text="scope.row.state === 1 ? '禁用' : '启用'" @click="hOpenDirectorys(scope.row)"></el-button>
            <el-button type="text" :disabled="scope.row.state === 1 ? true : false"  @click="handleOpen(scope.row.id)">修改</el-button>
            <el-button type="text" :disabled="scope.row.state === 1 ? true : false" @click="deleteCatalog(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
      <PageTool :paginationPage="searchForm.page" :paginationPagesize="searchForm.pagesize" :total="total" @pageChange="hPageChange" @pageSizeChange="changePageSize" style="margin-top: 1em;" :disabled="isLoading">
        </PageTool>
      </div>
      <directorys-add ref="edit" v-model="status" :id="id" @init="jupmPage()" v-if="status"></directorys-add>
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys'
import OurData from '../components/ourData.vue'
import PageTool from '../components/page-tool.vue'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  name: 'directorys',
  components: { OurData, PageTool, DirectorysAdd },
  data () {
    return {
      isLoading: false,
      searchForm: {
        subjectID: null,
        directoryName: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      tableData: [],
      total: this.total,
      status: false,
      id: null,
      timer: null
    }
  },
  mounted () {
    console.log(this.$route.query.id)
  },
  created () {
    if (this.$route.query.id) {
      this.searchForm.subjectID = this.$route.query.id
    }
    this.loadDirectorys()
  },
  methods: {
    async loadDirectorys () {
      this.isLoading = true
      this.searchForm.directoryName = this.searchForm.directoryName === '' ? null : this.searchForm.directoryName
      try {
        const res = await list(this.searchForm)
        this.isLoading = false
        this.tableData = res.data.items
        this.total = res.data.counts
        console.log(res)
      } catch (err) {
        this.$message.error('获取目录列表失败')
        console.log(err)
        this.isLoading = false
      }
    },
    // 新增回到第一页
    jupmPage () {
      if (this.id === null) {
        this.loadDirectorys()
        this.searchForm.page = 1
      } else {
        this.loadDirectorys()
      }
    },
    // 分页
    hPageChange (curpage) {
      this.searchForm.page = curpage
      this.loadDirectorys()
      this.eliminate()
    },
    // 每页多少数据
    changePageSize (pagesize) {
      this.searchForm.pagesize = pagesize
      console.log(pagesize)
      this.loadDirectorys()
      this.searchForm.page = 1
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.loadDirectorys()
    },
    // 删除的弹窗
    deleteCatalog (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.doDeleteCatalog(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除
    async doDeleteCatalog (id) {
      this.isLoading = true
      try {
        const res = await remove({
          id: id
        })
        this.loadDirectorys()
        console.log(res)
        this.isLoading = false
      } catch (err) {
        this.$message.error('操作失败')
        console.log(err)
        this.isLoading = false
      }
    },
    // 处理时间
    formatTime (row) {
      const date = new Date(row.addDate)
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return date.getFullYear() + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },
    // 清除搜索
    eliminate () {
      this.searchForm.directoryName = null
      this.searchForm.state = null
      this.loadDirectorys()
    },
    // 获取编辑数据
    async hOpenDirectorys (row) {
      try {
        const res = await changeState({
          id: row.id,
          state: row.state
        })
        this.$message.success('操作成功')
        console.log(res)
        row.state = row.state === 1 ? 0 : 1
      } catch (err) {
        this.$message.error('操作失败')
        console.log(err)
      }
    },
    // 搜索
    search () {
      // 设置节流阀,控制连续点击发送请求
      if (this.timer) return
      this.timer = setTimeout(() => {
        this.searchForm.page = 1
        this.loadDirectorys()
        this.timer = null
      }, 500)
      console.log(this.searchForm)
    },
    // 修改和新增的对话框
    handleOpen (id) {
      this.status = true
      this.id = id
    },
    // 回到学科
    returnn () {
      this.$router.push({
        path: 'list'
      })
    },
    resetpage () {
      this.searchForm.subjectID = null
      this.loadDirectorys()
    }
  },
  watch: {
    $route (to, form) {
      this.resetpage()
    }
  }
}
</script>

<style scoped lang='scss'>
// 版心布局样式
.container {
  margin-left: 10px;
  margin-top: 12px;
  margin-right: 10px;
  padding: 20px;
  // width: 100%;
  // height: 100%;
}
.input {
  display: flex;
  width: 100%;
/* background-color: red; */
  position: relative;
  .status {
    margin-left: 50px;
  }
}
</style>
